{% extends 'layout.html' %}
 {% block title %}
    短信登录
{% endblock %}
{% block css %}
<style>
    .container{
        width: 600px;
        padding: 40px 80px;
        margin: 20px auto;
        border: 1px solid #ccc;
        box-shadow: 0 3px 8px rgba(0, 0, 0, .2);
        border-radius: 20px;
    }
    .code{
        display: flex;
    }
    .code .in{
        margin-right: 5px;
    }
    .err-msg{
        color: red;
        position: absolute;
    }
</style>
{% endblock%}

{% block content %}
<h2 style="text-align: center">短信登录</h2>
    <div class="container">
     <form novalidate id="form" >
         {% csrf_token %}
          {% for item in form %}
              {% if item.name == 'code' %}
                  <div class="form-group">
                    <label for="{{ item.id_for_label }}">{{ item.label }}</label>
                    <div  class="code">
                        <div class="in">
                            {{ item }}
                            <span class="err-msg"></span>
                        </div>
                        <input type="button" class="btn btn-default" value="点击获取验证码" id="code_id">
                    </div>

                  </div>
              {% else %}
                 <div class="form-group">
                    <label for="{{ item.id_for_label }}">{{ item.label }}</label>
                        {{ item }}
                      <span class="err-msg"></span>
                 </div>
              {% endif %}

          {% endfor %}
         <button class="btn btn-primary" id="login">登录</button>

        </form>
    </div>
{% endblock%}

{% block js %}
<script>
    //获取验证码
    function  getCode(){
        let btn=document.querySelector('#code_id')
        btn.addEventListener('click',async ()=>{
            let phone_input=document.querySelector('#id_mobile_phone').value
            if(!phone_input.match(/^1[1-9]\d{9}$/)) return alert('手机号格式错误!')
            //向后台发送数据
            const res=await  http({
                method:'get',
                url:'{% url "web:send_sms"%}',
                params:{'mobile_phone':phone_input,'type':'login'}
            })
            // console.log(res)
            if(res.code==200){
                // console.log(res.data)
                // 禁用按钮  提示按钮文字
                btn.setAttribute('disabled',true)
                let s=5
                let timer=setInterval(()=>{
                   if(s>1){
                        btn.value=`${s}秒后发送短信`
                        s--
                   }else{

                       btn.removeAttribute('disabled')
                       btn.value=`点击获取验证码`
                       clearInterval(timer)
                   }
                },1000)
            }else{
                //后台错误
                // console.log(res.error)
                // alert('发送短信失败!')
               let timer=null
               for(let item in res.error){
                   clearTimeout(timer)
                   let doc=document.querySelector(`#id_${item}`)
                   doc.nextElementSibling.innerText=res.error[item][0]
                   timer=setTimeout(() => {
                       doc.nextElementSibling.innerText=''
                   },1000)

               }
            }
        })
    }
    getCode()

    //登录按钮
    function login(){
        let loginBtn=document.querySelector('#login')
        loginBtn.addEventListener('click',async (e)=>{
            e.preventDefault()
            let form =document.querySelector('#form')
            let formData=new FormData(form)
            const res=await  fetch('{% url "web:sms_login"%}',{method :'post',body:formData})
            const data=await res.json()

            if(data.code==200){
                location.href=data.data
            }else{
               let timer
               for(let item in data.error){
                   clearTimeout(timer)
                   let doc=document.querySelector(`#id_${item}`)
                   doc.nextElementSibling.innerText=data.error[item][0]

                   timer=setTimeout(() => {
                       doc.nextElementSibling.innerText=''
                   },1000)

               }
            }
        })
    }
    login()
</script>
{% endblock%}